<template>
	<view>
		<!-- 头部：定位,搜索 start-->
		<view class="titcontent">
			<view class="CurrentLocation" @click="getamapFile('go')">{{userlocation.desc}}</view>
			<view class="viewinput" @click="gotohomepageselec()"><input type="text" placeholder="请输入商家或商品名"></view>
			<view class="iconfont iconsaoyisao" @click="getscancode()"></view>
		</view>
		<!-- 头部：定位,搜索 end-->
		<!-- 轮播图start -->
		<view class="HomeSwiperImgContent">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item v-for="(item,index) in swiperimgdata" :key=index>
								<image class="HomeSwiperImg" :src="item.value"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图end -->
		<!-- 九宫格start -->
		<view class="homegrid">
			<swiper :indicator-dots="true" :style="{height:swiperGridHeight,width:swiperGridWidth}">
				<swiper-item>
					<view class="grid-view">
						<uni-grid :options="data1" @click="griddata" column-num="4" :show-border="false" />
						</uni-grid>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="grid-view">
						<uni-grid :options="data1" @click="griddata" column-num="4" :show-border="false" />
						</uni-grid>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 九宫格end -->
		<!-- 新手奖励start -->
		<view class="homeoneimg">
			<image src="/static/img/homepage/newman.png"></image>
		</view>
		<!-- 新手奖励end -->
		<!-- 筛选选项start -->
		<view class="content">
			<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
		</view>
		<!-- 筛选选项end -->
		<!-- 店铺列表start -->
		<view class="homeshoplist page">
					<view class="uni-list">
						<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in shoplist" :key="index" @click="goshopdetail(item.id)">
							<view class="uni-media-list">
								<view class="uni-media-list-logo">
									<image v-if="showImg" :src="item.img"></image>
								</view>
								<view class="uni-media-list-body">
									<view class="uni-media-list-text-top">{{item.title}}</view>
									<!-- 第二行start -->
									<!-- 评分start -->
									<view class="twoline">
										<uni-rate disabled :value="item.RateValue" size="12"></uni-rate>
										<text class="ml5">{{item.RateValue}}</text>
										<text class="ml10">月售:{{item.MonthlySale}}</text>
										<text class="fr"><text>{{item.Distance}} m</text></text>
									</view>
									<!-- 评分end -->
									<!-- 第二行end -->
									<!-- 第三,四行start -->
									<view class="uni-media-list-text-bottom uni-ellipsis listline" v-show="item.PrivateRoom!=0"><image src="/static/icon/homepage/shoplistroom.png"></image>有包房</view>
									<view class="uni-media-list-text-bottom uni-ellipsis listline"><image src="/static/icon/homepage/shoplistmoney.png"></image>{{item.consumption}}¥ /人</view>
									<view class="uni-media-list-text-bottom uni-ellipsis listline" v-show="item.vip!=0"><image src="/static/icon/homepage/shoplistvip.png"></image>支持会员卡</view>
									<!-- 第三,四行end -->
								</view>
							</view>
						</view>
					</view>
				</view>
		<!-- 店铺列表end -->
		
	</view>
</template>

<script>
	// import '../../static/iconfont/iconfont.js';
	// import uniGrid from '@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue';
	//内部引用存在层叠样式,所以用script引用;
	import '../../static/iconfont/iconfont.css';
	import {uniGrid,uniRate} from '@dcloudio/uni-ui';
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import amapFile from '../../common/amap-wx.js';
	export default {
		components: {uniGrid,slFilter,uniRate},
		data() {
			return {
				providerList: [],
				hasProvider: false,
				getbutton:true,
				//位置
				userlocation: '',
				//轮播图start
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				swiperimgdata: [{
						id: '1',
						value: '/static/img/homepage/s1.jpg'
					},
					{
						id: '2',
						value: '/static/img/homepage/s2.jpg'
					},
					{
						id: '3',
						value: '/static/img/homepage/s3.jpg'
					},
					{
						id: '4',
						value: '/static/img/homepage/s4.jpg'
					},
					{
						id: '5',
						value: '/static/img/homepage/s5.jpg'
					}
				],
				//轮播图end
				//九宫格数据start
				swiperGridHeight: '0px',
				swiperGridWidth: '100%',
				data1: [{
						image: '/static/icon/homepage/grid1.png',
						text: '美食'
					},
					{
						image: '/static/icon/homepage/grid2.png',
						text: '甜品饮料'
					},
					{
						image: '/static/icon/homepage/grid3.png',
						text: '商品超市'
					},
					{
						image: '/static/icon/homepage/grid4.png',
						text: '预定餐厅'
					},
					{
						image: '/static/icon/homepage/grid5.png',
						text: '果蔬生鲜'
					},
					{
						image: '/static/icon/homepage/grid6.png',
						text: '新店优惠'
					},
					{
						image: '/static/icon/homepage/grid7.png',
						text: '酒店宾馆'
					},
					{
						image: '/static/icon/homepage/grid8.png',
						text: '下午茶'
					},
				],
				//九宫格数据end
				// 筛选选项start
				themeColor: '#F94F47',
				filterResult: '',
				menuList: [{
						'title': '综合排序',
						'key': 'screen1',
						'isSort': true,
						'detailList': [{
								'title': '默认',
								'value': 'default'
							},
							{
								'title': '距离优先',
								'value': 'jlzj',
							},
							{
								'title': '评分最高',
								'value': 'pfzg'
							},
							{
								'title': '起送最低',
								'value': 'qszd'
							},
							{
								'title': '配送最低',
								'value': 'pszd'
							},
							{
								'title': '价格最优',
								'value': 'jgzy'
							},
							{
								'title': '人均低到高',
								'value': 'rjddg'
							}
						]

					},
					{
						'title': '菜系',
						'key': 'screen2',
						'isSort': true,
						'detailList': [{
								'title': '全部',
								'value': '0'
							},
							{
								'title': '家常菜',
								'value': '1'
							},
							{
								'title': '徽菜',
								'value': '2'
							},
							{
								'title': '川菜',
								'value': '3'
							},
							{
								'title': '湘菜',
								'value': '4'
							},
							{
								'title': '苏菜',
								'value': '5'
							},
							{
								'title': '鲁菜',
								'value': '6'
							},
							{
								'title': '江西菜',
								'value': '7'
							}
						]
					},
					//               {
					//                   'title': '排序',
					//                   'key': 'screen3',
					// 'isSort': true,
					//                   'detailList': [{
					//                           'title': '距离最近',
					//                           'value': 'jlzj'
					//                       },
					//                       {
					//                           'title': '价格最优',
					//                           'value': 'jgzy'
					//                       }]
					//               },
					{
						'title': '筛选',
						'key': 'temp',
						'isMutiple': true,
						'detailTitle': '可多选',
						'detailList': [{
								'title': '筛选',
								'value': 'no'
							},
							{
								'title': '3-4人',
								'value': 'p34'
							},
							{
								'title': '5-8人',
								'value': 'p58'
							},
							{
								'title': '8-10人',
								'value': 'p810'
							},
							{
								'title': '10人以上',
								'value': 'p10above'
							},
							{
								'title': '营业中',
								'value': 'yyz'
							},
							{
								'title': '有包房',
								'value': 'ybf'
							},
							{
								'title': '有wifi',
								'value': 'ywifi'
							},
							{
								'title': '可停车',
								'value': 'ktc'
							},
							{
								'title': '商家折扣',
								'value': 'sjzk'
							}
						]
					}
				],
				// 筛选选项end
				//店铺列表start
				showImg: true,
				shoplist: [],
				//店铺列表end
				//刚进来第一页，下拉刷新加在第二页，每次下拉拿10条
				onReachNum: 2
			};
		},
		methods: {
			//调用高德sdk获取当前位置信息
			getamapFile(e) {
				var myAmapFun = new amapFile.AMapWX({
					key: this.keys
				});
				myAmapFun.getRegeo({
					success: (data) => {
						// console.log(data);
						this.userlocation = data[0];
						uni.request({
							url: this.zurl+'/index/businessListings',
							method: 'GET',
							data: {
								// "latitude": '33.955832',
								// "longitude": '116.798275',
								"latitude": this.userlocation.latitude,
								"longitude": this.userlocation.longitude,
							},
							success: res => {
								this.shoplist = res.data.data;
								console.log('位置信息调取成功');
							},
							fail: () => {
								console.log('位置信息调取失败');
							}
						});
						//成功回调
					}
				});
				if (e == 'go') {
					uni.navigateTo({
						url: 'locationindex'
					})
				}
			},
			//搜索框点击跳转
			gotohomepageselec() {
				uni.navigateTo({
					url: 'homepage-select'
				})
			},
			//店铺点击跳转
			goshopdetail(id) {
				uni.navigateTo({
					url: 'shopdetail?id='+100000
				})
			},
			//扫码
			getscancode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.showModal({
							title: res.result,
						});
					}
				});
			},
			//筛选选项返回值
			result(val) {
				this.onReachNum = 1;
				this.filterResult = JSON.stringify(val, null, 2)
				console.log('filter_result:' + JSON.stringify(val));
				// filter_result:{"screen1":"qszd","screen2":"1","screen3":"jgzy","screen4":["ktc","sjzk","yyz","ybf","ywifi","8and10","10above"]}	uni.request({
				uni.request({
					url: this.zurl+'/index/businessListings',
					method: 'GET',
					data: {
						"latitude": this.userlocation.latitude,
						"longitude": this.userlocation.longitude,
						// "latitude": '33.955832',
						// "longitude": '116.798275',
						"onreachbottom": this.onReachNum,
						"condition": JSON.stringify(val)
					},
					success: res => {
						console.log(res.data);
						this.shoplist.splice(0, this.shoplist.length);
						if (res.data.code == 0) {
							for (var i = 0; i < res.data.data.length; i++) {
								this.shoplist.push(res.data.data[i]);
							}
							this.onReachNum++;
						}
					}
				});

			},
			// 九宫格点击
			griddata(e) {
				console.log(e);
			}
		},
		onShow() {
			//读取位置
			uni.getStorage({
				key: 'listdata',
				success: (res) => {
					this.userlocation = res.data;
					console.log('读取位置成功');
					console.log(this.userlocation);
				},
				fail: (res) => {
					console.log('读取位置失败');
				}
			});
		},
		onLoad() {
			//当前位置
			this.getamapFile();
			//初始进入时清除位置
			uni.removeStorage({
				key: 'listdata',
				success: function(res) {
					console.log('清除位置信息');
				}
			});
		},
		onReady() {
			// 初始化九宫格
			uni.createSelectorQuery().select('.grid-view').boundingClientRect().exec((ret) => {
				this.swiperGridHeight = ret[0].height + 1 + 'px'
				// #ifndef H5
				this.swiperGridWidth = ret[0].width + 1 + 'px'
				// #endif
			});
			// console.log('mounted');
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			//店铺列表
			// var defaultshoplistdata=[
			// {
			// title: "达美乐比萨（北石路店）",
			// RateValue:'5',
			// RateSize:'12',
			// MonthlySale:'20',
			// Distance:'1.5km',
			// img: "/static/img/homepage/s1.jpg",
			// PrivateRoomicon:"/static/icon/homepage/shoplistroom.png",
			// PrivateRoom:"有包房",
			// consumptionicon:"/static/icon/homepage/shoplistmoney.png",
			// consumption:"99￥/人",
			// vipicon:"/static/icon/homepage/shoplistvip.png",
			// vip:"支持会员卡",
			// }
			// ];
			// this.shoplist.splice(0,this.shoplist.length);
			// this.shoplist=defaultshoplistdata;
			setTimeout(function() {
				uni.stopPullDownRefresh();
				console.log('关闭刷新');
			}, 1000);
		},
		onReachBottom() {
			uni.request({
				url: this.zurl+'/index/businessListings',
				method: 'GET',
				data: {
					// "latitude": '33.955832',
					// "longitude": '116.798275',
					"latitude": this.userlocation.latitude,
					"longitude": this.userlocation.longitude,
					"onreachbottom": this.onReachNum,
					"condition": this.filterResult
				},
				success: res => {
					// console.log(res.data);
					if (res.data.code == 0) {
						for (var i = 0; i < res.data.data.length; i++) {
							this.shoplist.push(res.data.data[i]);
						}
						this.onReachNum++;
					}
				},
				fail: () => {
					console.log('err');
				}
			});
		},

	}
</script>

<style lang="less" scoped>
	@import url("../../common/uni.css");
	//自定义
	.ml5 {
		margin-left: 5px;
	}

	.ml10 {
		margin-left: 10px;
	}

	//common/uni.css文件更改
	.uni-padding-wrap {
		width: 750upx;
		padding: 0;
	}

	//标题栏
	.titcontent {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		font-size: 16px;
		position: fixed;
		top: 0;
		z-index: 99;
		color: #000;
		background-color: #fff;

		.CurrentLocation {
			width: 200upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.CurrentLocation::before {
			content: '';
			width: 15px;
			height: 15px;
			background: url(../../static/icon/homepage/CurrentLocationIcon.png);
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			margin-right: 5px;
		}

		.viewinput {
			position: relative;
			flex: .8;

			input {
				background-color: #EBEBE4;
				border-radius: 100px;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 3px 30px;
				font-size: 14px;
				pointer-events: none;
			}

			input:after {
				content: '';
				background: url(../../static/icon/homepage/HomeSelect.png);
				background-repeat: no-repeat;
				background-size: contain;
				width: 15px;
				height: 15px;
				margin-left: 10px;
				margin-right: 5px;
				position: absolute;
				left: 0;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}
		}

		.iconsaoyisao {
			font-size: 35upx;
		}
	}

	//轮播图
	.HomeSwiperImgContent {
		margin-top: 55px;

		.swiper {
			height: 360upx;
		}

		.HomeSwiperImg {
			height: 100%;
			width: 100%;
		}
	}

	//九宫格
	.homegrid {
		.grid-view {
			// #ifdef H5
			padding: 0 0.5px;
			// #endif
			box-sizing: border-box;
		}

		.uni-grid-item-text {
			font-size: 12px;
		}
	}

	//单张图片推荐
	.homeoneimg {
		width: 750upx;
		height: 200upx;
		margin-top: 10px;
		padding: 2%;

		image {
			width: 96%;
			height: 100%;
		}
	}

	//店铺列表
	.homeshoplist {

		//内部body
		.uni-media-list-body {
			height: auto;
		}

		//左侧图片
		.uni-media-list-logo {
			width: 125px;
			height: 85px;
		}

		//第二行内容
		.twoline {
			display: flex;
			flex: column;
			align-items: center;
			font-size: 12px;
			width: 99%;
			margin-top: 6px;

			.fr {
				float: right;
				text-align: right;
				flex: 1;
			}
		}

		//第三四五行
		.listline {
			margin-top: 6px;

			image {
				width: 15px;
				height: 13px;
				margin-right: 6px;
			}
		}
	}
	// .powerBtn{
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	z-index: 99999;
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: transparent;
	// 	font-size: 0;
	// 	border: 1px solid red;
	// }
</style>
